import React from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';

import Menu, { SubMenu, Item as MenuItem } from 'rc-menu';

@inject('portalThemeStore')
@observer
class LeftMenu extends React.Component {
    constructor(props) {
        super(props);
        this.getLeftMenu = this.getLeftMenu.bind(this);
        this.onTitleClick = this.onTitleClick.bind(this);
        this.onSelect = this.onSelect.bind(this);
    }

    render() {
        const { portalThemeStore, type } = this.props;
        const { frontEndMenu = [] } = portalThemeStore;
        const _frontEndMenu = toJS(frontEndMenu);

        let leftMenu = [];
        if (_frontEndMenu && _frontEndMenu.length) {
            if (type == 'portal') {
                leftMenu = _frontEndMenu[0].child;
            } else if (type == 'module') {
                leftMenu = _frontEndMenu.slice(1);
            }
        }

        return (
            <div className="em7-portal-menu">
                <Menu ecId={`${this && this.props && this.props.ecId || ''}_Menu@i6y4qe`}
                  mode="vertical"
                  prefixCls="pt-menu"
                  openAnimation="zoom"
                  subMenuCloseDelay={0.2}
                  selectedKeys={''}
                  onClick={this.onSelect}
                >
                    {this.getLeftMenu(leftMenu, 1)}
                </Menu>
            </div>
        );
    }

    getLeftMenu(data, level) {
        return data.map((item) => {
            if (item.child && item.child.length) {
                return (
                    <SubMenu ecId={`${this && this.props && this.props.ecId || ''}_SubMenu@lj9vts@${item.id}`}
                      key={item.id}
                      title={<span>{item.name}</span>}
                      data={item}
                      onTitleClick={() => this.onTitleClick(item)}
                    >
                        {this.getLeftMenu(item.child, level + 1)}
                    </SubMenu>
                );
            }
                return (
                    <MenuItem ecId={`${this && this.props && this.props.ecId || ''}_MenuItem@pyw0rz@${item.id}`} key={item.id} data={item}>
                        <span>{item.name}</span>
                    </MenuItem>
                );
        });
    }

    onTitleClick(data) {
        const { portalThemeStore, type } = this.props;

        if (data.mobxrouteurl || data.fullrouteurl || (data.url && data.url != 'javascript:void(0);')) {
            this.props.resetShowData(type, data);
            portalThemeStore.onLoadMain(data);
        } else if (data.child && data.child.length) {
            let item = data.child[0];
            for (; ;) {
                if (item.mobxrouteurl || item.fullrouteurl || (item.url && item.url != 'javascript:void(0);')) {
                    this.props.resetShowData(type, item);
                    portalThemeStore.onLoadMain(item);
                    break;
                } else if (item.child && item.child.length) {
                    item = item.child[0];
                } else {
                    break;
                }
            }
        }
    }

    onSelect(e) {
        const { data } = e.item.props;
        const { portalThemeStore, type } = this.props;

        this.props.resetShowData(type, data);
        portalThemeStore.onLoadMain(data);
    }
}

export default LeftMenu;
